<template>
  <div class="box">
    <el-card class="container indent-create" shadow="always">
      <div class="address-box">
        <template v-if="isAddress">
          <div class="title">{{$t('indent.shipping_address')}}</div>
          <address-list class="address-box-list" :select="true" @selectedAddress="selectedAddress" />
        </template>
        <div class="title">{{$t('indent.confirm_order_information')}}</div>
        <el-table :data="ruleForm.indentCommodity" ref="table" class="table">
          <el-table-column align="center" width="100">
            <template slot-scope="scope">
              <NuxtLink :to="{ path: `/product/detail/${scope.row.good_id}`}">
                <el-image class="image" :src="scope.row.img | smallImage(80)" fit="cover" />
              </NuxtLink>
            </template>
          </el-table-column>
          <el-table-column :label="$t('indent.name')">
            <template slot-scope="scope">
              <NuxtLink :to="{ path: `/product/detail/${scope.row.good_id}`}">
                <p>{{scope.row.name}}</p>
                <p class="specification">{{scope.row.specification}}</p>
              </NuxtLink>
            </template>
          </el-table-column>
          <el-table-column :label="$t('indent.type')" width="120">
            <template slot-scope="scope">
              {{ scope.row.good.type }}
            </template>
          </el-table-column>
          <el-table-column :label="$t('indent.price')" width="150" align="center">
            <template slot-scope="scope">
              {{scope.row.price| thousands}}
            </template>
          </el-table-column>
          <!-- <el-table-column label="포인트" width="100" align="center">
            <template slot-scope="scope">
              {{scope.row.good.integral}}
            </template>
          </el-table-column> -->
          <el-table-column :label="$t('indent.number')" width="150" align="center">
            <template slot-scope="scope">
              {{scope.row.number}}
            </template>
          </el-table-column>
          <el-table-column :label="$t('indent.subtotal')" width="150" align="center">
            <template slot-scope="scope">
              {{(scope.row.price * scope.row.number) | thousands}}
            </template>
          </el-table-column>
        </el-table>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="remark">
          <el-form-item prop="remark">
            <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" :placeholder="$t('hint.error.import', {attribute: $t('indent.remark')})" v-model="ruleForm.remark"
              maxlength="200" show-word-limit>
            </el-input>
          </el-form-item>
        </el-form>
        <div class="coupon">
          <!-- <div>
              使用积分
            </div> -->

          <el-popover placement="bottom" width="400" trigger="manual" v-model="visible">
            <div class="ul">
              <div class="li">현재 결제 시 <i>{{totalPoints*bl}}</i> 포인트 사용 가능하며, 고객님 에게 총 적립금은 <i>{{ totalPoints }}</i> 입니다.</div>
              <div class="li"><el-input-number :precision="0" size="mini" :step="1000" v-model="integral" :min="0"></el-input-number>
                <div class="money"><span></span>{{ integral }}</div>
                <el-button type="danger" size="mini" @click="handleChoose(1)">사용 하기 </el-button>
              </div>
              <div class="li"> <el-button size="mini" @click="handleChoose(2)">사용 하지않아</el-button></div>
            </div>
            <div class="tag" slot="reference" @click="visible = !visible">{{type==0?'포인터 사용':type==2?'사용 하지않아':`포인트 사용${usePoints}`}}</div>
          </el-popover>
        </div>
        <div class="count-detail">
          <div class="bill-item">
            <div class="bill-name">{{$t('indent.number_of_items')}}：</div>
            <div class="bill-money">{{ruleForm.indentCommodity.length}}{{$t('good_indent.piece')}}</div>
          </div>
          <div class="bill-item">
            <div class="bill-name">{{$t('indent.total')}}：</div>
            <div class="bill-money">{{total | thousands}}{{$t('common.monetary_unit')}}</div>
          </div>
          <div class="bill-item">
            <div class="bill-name">{{$t('indent.freight')}}：</div>
            <div class="bill-money">{{ruleForm.carriage | thousands}}{{$t('common.monetary_unit')}}</div>
          </div>
          <div></div>
          <div class="bill-item" style="margin-top:10px;">
            <div class="bill-name">
              <div class="name">{{$t('indent.payroll')}}：</div>
              <div class="price">{{(((ruleForm.carriage+total-(usePoints*1))*100)/100) | thousands}}</div>
              <div class="unit">{{$t('common.monetary_unit')}}</div>
            </div>
          </div>
        </div>
        <el-divider></el-divider>
        <div class="operation">
          <el-button plain @click="go" :loading="buttonLoading"><b>{{$t('indent.back')}}</b></el-button>
          <el-button type="danger" @click="submit" :loading="buttonLoading"><b>{{$t('cart.settle')}}</b></el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<style lang='scss' scoped>
@import './scss/create';
</style>

<script>
import js from './js/create'
export default js
</script>
